<template>
	<!-- 商品列表 -->
	<view class="goods-container">
		<view class="recommend" v-if="list.content.length > 0">
			<text class="txt">为您推荐</text>
		</view>
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
			@down="downCallback" :up="upOption" @up="upCallback">
			<view class="diy-goods" :style="{ background: itemStyle.background }">
				<view class="goods-list" :class="[`display__${itemStyle.display}`, `column__${itemStyle.column}`]">
					<scroll-view :scroll-x="itemStyle.display === 'slide'">
						<view class="goods-item" v-for="(dataItem, index) in list.content" :key="index"
							@click="onTargetGoods(dataItem.id)">
							<!-- 单列商品 -->
							<block v-if="itemStyle.column === 1">
								<view class="dis-flex">
									<!-- 商品图片 -->
									<view class="goods-item_left">
										<image class="image" lazy-load :lazy-load-margin="0" :src="dataItem.logo">
										</image>
									</view>
									<view class="goods-item_right">
										<!-- 商品名称 -->
										<view v-if="itemStyle.show.includes('goodsName')"
											class="goods-name twoline-hide">
											<text>{{ dataItem.name }}</text>
										</view>
										<view class="goods-item_desc">
											<!-- 商品卖点 -->
											<view v-show="itemStyle.show.includes('sellingPoint')"
												class="desc-selling_point dis-flex">
												<text
													class="oneline-hide">{{ dataItem.salePoint ? dataItem.salePoint : '' }}</text>
											</view>
											<!-- 商品销量 -->
											<view v-if="itemStyle.show.includes('goodsSales')"
												class="desc-goods_sales dis-flex">
												<text>已售{{ dataItem.initSale ? dataItem.initSale : 0 }}件</text>
											</view>
											<!-- 商品价格 -->
											<view class="desc_footer">
												<text v-if="itemStyle.show.includes('goodsPrice')"
													class="price_x">¥{{ dataItem.price ? dataItem.price : '0.00' }}</text>
												<text class="price_y col-9"
													v-if="itemStyle.show.includes('linePrice') && dataItem.linePrice > 0">¥{{ dataItem.linePrice }}</text>
												<view class="buy-now">去购买</view>
											</view>
										</view>
									</view>
								</view>
							</block>
							<!-- 多列商品 -->
							<block v-else>
								<view class="goods-info">
									<!-- 商品图片 -->
									<view class="goods-image">
										<image class="image" lazy-load :lazy-load-margin="0" mode="aspectFill"
											:src="dataItem.logo"></image>
									</view>
									<view class="detail">
										<!-- 商品标题 -->
										<view v-if="itemStyle.show.includes('goodsName')"
											class="goods-name twoline-hide">
											{{ dataItem.name }}
										</view>
										<!-- 商品卖点 -->
										<view v-show="itemStyle.show.includes('sellingPoint')"
											class="desc-selling_point dis-flex">
											<text
												class="oneline-hide">{{ dataItem.salePoint ? dataItem.salePoint : '' }}</text>
										</view>
										<!-- 商品价格 -->
										<view class="detail-price oneline-hide">
											<text v-if="itemStyle.show.includes('goodsPrice')"
												class="goods-price f-30 col-m">￥{{ dataItem.price }}</text>
											<text v-if="itemStyle.show.includes('linePrice') && dataItem.linePrice > 0"
												class="line-price col-9 f-24">￥{{ dataItem.linePrice }}</text>
											<text class="iconfont icon-gouwuche" @click.stop="onShowSkuPopup(2,dataItem.id)"></text>
											<text v-if="itemStyle.show.includes('goodsSales')"
												class="sales">已售{{ dataItem.initSale ? dataItem.initSale : 0 }}件</text>
										</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
		</mescroll-body>
		<!-- 商品SKU弹窗 -->
		<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart"/>
	</view>
</template>

<script>
	import SkuPopup from '@/pages/goods/components/SkuPopup'
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData,
		setCartTabBadge,
		setCartTotalNum
	} from '@/utils/app'
	import * as GoodsApi from '@/api/goods'
	import * as CartApi from '@/api/cart'
	const pageSize = 10;

	export default {
		name: "Goods",

		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			isReflash: Boolean
		},

		components: {
			MescrollBody,
			SkuPopup
		},

		mixins: [MescrollMixin],

		data() {
			return {
				list: getEmptyPaginateObj(),
				// 正在加载中
				isLoading: true,
				showSkuPopup: false,
				goods:null,
				skuMode:2,
				cartTotal:0,
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于1条才显示无更多数据
					noMoreSize: 1,
				}
			}
		},
		watch: {
			isReflash(value) {
				if (value) {
					this.getGoodsList(1);
				}
			}
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {

			/**
			 * 跳转商品详情页
			 */
			onTargetGoods(goodsId) {
				this.$navTo(`pages/goods/detail`, {
					goodsId
				})
			},

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getGoodsList(page.num)
					.then(list => {
						const curPageLen = list.content.length;
						const totalSize = list.totalElements;
						app.mescroll.endBySize(curPageLen, totalSize);
					})
					.catch(() => {
						app.mescroll.endErr();
					})
			},
			onShowSkuPopup(skuMode, goodsId) {
				const app = this
				app.isLoading = true
				return new Promise((resolve, reject) => {
				  GoodsApi.detail(goodsId)
					.then(result => {
					  const goodsData = result.data
					  
					  if (goodsData.skuList) {
						  goodsData.skuList.forEach(function(sku, index) {
							goodsData.skuList[index].specIds = sku.specIds.split('-')
							goodsData.skuList[index].skuId = sku.id
						  })
					  }
					  
					  app.goods = goodsData
					  app.skuMode = skuMode
					  app.showSkuPopup = !app.showSkuPopup
					  
					  console.log(app.skuMode)
					  
					  app.isLoading = false
					  
					  resolve(result)
					})
					.catch(err => reject(err))
				})
			  },
			  // 更新购物车数量
			  onAddCart(total) {
			    this.$toast("添加购物车成功");
				this.getCartTotal();
			  },
			  // 获取购物车总数量
			  getCartTotal() {
			    const app = this
			    return new Promise((resolve, reject) => {
			      CartApi.list()
			        .then(result => {
			          app.cartTotal = result.data.totalNum;
			          setCartTotalNum(app.cartTotal);
			          setCartTabBadge();
			          resolve(result);
			        })
			        .catch(err => reject(err));
			    })
			  },
			/**
			 * 获取商品列表
			 * @param {number} pageNo 页码
			 */
			getGoodsList(pageNo) {
				const app = this
				console.log('pageNo=====', pageNo);
				const param = {
					page: pageNo,
					pageSize: pageSize
				}
				return new Promise((resolve, reject) => {
					GoodsApi.search(param)
						.then(result => {
							// 合并新数据
							const newList = result.data;
							app.list.content = getMoreListData(newList, app.list, pageNo)
							resolve(newList)
						})
						.catch(reject)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.goods-container {
		.recommend {
			font-size: 30rpx;
			font-weight: bold;
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding: 20rpx 8rpx 20rpx 8rpx;
			background: #f5f5f5;

			.txt {
				border-left: solid $fuint-theme 10rpx;
				padding-left: 10rpx;
			}
		}

		.diy-goods {
			.goods-list {
				padding: 0rpx 16rpx 16rpx 16rpx;
				box-sizing: border-box;

				.goods-item {
					box-sizing: border-box;
					padding: 0rpx 16rpx 16rpx 16rpx;
					background: #f5f5f5;

					.goods-info {
						background: #ffffff;
						border-radius: 16rpx;
						padding: 10rpx;

						.goods-image {
							position: relative;
							width: 100%;
							height: 0;
							padding-bottom: 100%;
							overflow: hidden;
							text-align: center;

							&:after {
								content: '';
								display: block;
								margin-top: 100%;
							}

							.image {
								position: absolute;
								box-sizing: border-box;
								padding: 30rpx;
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								-o-object-fit: cover;
								object-fit: cover;
								border-radius: 110rpx;
							}
						}
					}

					.detail {
						padding: 8rpx;
						background: #fff;
						border-bottom-left-radius: 16rpx;
						border-bottom-right-radius: 16rpx;

						.goods-name {
							height: 88rpx;
							line-height: 1.3;
							white-space: normal;
							color: #484848;
							font-size: 26rpx;
							font-weight: bold;
						}

						.detail-price {
							.goods-price {
								margin-right: 8rpx;
								font-size: 34rpx;
								font-weight: bold;
							}

							.line-price {
								text-decoration: line-through;
							}
						}
					}
				}

				&.display__slide {
					white-space: nowrap;
					font-size: 0;

					.goods-item {
						display: inline-block;
					}
				}

				&.display__list {
					.goods-item {
						float: left;
					}
				}

				&.column__2 {
					.goods-item {
						width: 50%;
					}

					.desc-selling_point {
						height: 40rpx;
						width: 400rpx;
						font-size: 24rpx;
						color: #e49a3d;
					}

					.sales {
						color: #999;
						font-size: 24rpx;
						margin-top: 10rpx;
						float: right;
					}
				}

				&.column__3 {
					.goods-item {
						width: 33.33333%;
					}
				}

				&.column__1 {
					.goods-item {
						width: 100%;
						height: 250rpx;
						margin-bottom: 10rpx;
						padding: 20rpx;
						box-sizing: border-box;
						background: #fff;
						line-height: 1.6;

						&:last-child {
							margin-bottom: 0;
						}

						&:first-child {
							margin-top: 8rpx;
						}
					}

					.goods-item_left {
						display: flex;
						width: 40%;
						background: #fff;
						align-items: center;

						.image {
							display: block;
							width: 220rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
					}

					.goods-item_right {
						position: relative;
						width: 60%;

						.goods-name {
							margin-top: 20rpx;
							max-height: 69rpx;
							line-height: 1.3;
							white-space: normal;
							color: #484848;
							font-size: 30rpx;
							font-weight: bold;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
					}

					.goods-item_desc {
						margin-top: 0rpx;
					}

					.desc-selling_point {
						height: 40rpx;
						width: 400rpx;
						font-size: 24rpx;
						color: #e49a3d;
					}

					.desc-goods_sales {
						color: #999;
						font-size: 24rpx;
					}

					.desc_footer {
						font-size: 24rpx;

						.price_x {
							margin-right: 16rpx;
							color: #f03c3c;
							font-size: 33rpx;
							font-weight: bold;
						}

						.price_y {
							text-decoration: line-through;
						}

						.buy-now {
							color: #FFFFFF;
							float: right;
							margin-right: 20rpx;
							border: solid 1rpx $fuint-theme;
							background: $fuint-theme;
							padding: 8rpx 20rpx 8rpx 20rpx;
							border-radius: 5rpx;
							display: block;
						}
					}
				}
			}
		}
	}
</style>